<template>
  <view class="container" v-if="!isLoading">
    <view class="linear-bg" :style="'padding-top:'+($xyfun.xysys().buttonBound.top)+'px;'">
      <view class="navBarTit" :style="'height:'+($xyfun.xysys().buttonBound.height)+'px;'">
        <view class="local" @tap="chooseUserLocation">
          <text class="yz-iconfont yz-dingwei"></text>
          {{addr!==''?$xyfun.locCity(addr):'定位'}}
        </view>
        <text>{{common.auditConfig.index_app_title}}</text>
      </view>
    </view>
    <view class="banner_box" :style="'margin-top:'+$xyfun.xysys().top+'px;'">
      <swiper class="banner">
        <swiper-item v-for="(val,idx) in banner">
          <image :src="$xyfun.image(val.image)"></image>
        </swiper-item>
      </swiper>
    </view>

    <view class="teacher_settled_box menus_box">
      <view class="title">我是教员，入驻平台</view>
      <view class="menus">
        <view class="item" @tap="$xyfun.to('/pages/teacher/apply')">
          <view class="tit">教员平台入驻</view>
          <view class="desc">免费入驻，信息全面，功能优质</view>
          <view class="tool">
            <view class="but">立即进入</view>
            <image class="icon" :src="$xyfun.image('/static/parttime_for_jiajiao/index_teacher_apply.png')"></image>
          </view>
        </view>
        <view class="item" @tap="toAcceptJob()">
          <view class="tit">教员快速接单</view>
          <view class="desc">"滴滴模式"，快速接单</view>
          <view class="tool">
            <view class="but">立即进入</view>
            <image class="icon" :src="$xyfun.image('/static/parttime_for_jiajiao/index_fast_accept.png')"></image>
          </view>
        </view>
      </view>
    </view>

    <view class="is_family" v-if="common.auditConfig.audit_on==0">
      <view class="title">{{common.auditConfig.index_find1}}</view>

      <view class="cards">
        <view class="card_l">
          <view class="item" @tap="$xyfun.to('/pages/teacher?settled=1')" :style="'background-image: url('+$xyfun.image('/static/parttime_for_jiajiao/ml1.png')+');'">
            <view class="tit">大学生兼职家教</view>
            <view class="desc">师范生，985，211，重点大学</view>
            <view class="but">立即进入，自选家教</view>
          </view>
          <view class="item" @tap="$xyfun.to('/pages/teacher?settled=2')" :style="'background-image: url('+$xyfun.image('/static/parttime_for_jiajiao/ml2.png')+');'">
            <view class="tit">专职教员家教</view>
            <view class="desc">持证教员，专业执教</view>
            <view class="but">立即进入，自选家教</view>
          </view>
          <view class="item" @tap="$xyfun.to('/pages/teacher?settled=3')" :style="'background-image: url('+$xyfun.image('/static/parttime_for_jiajiao/ml3.png')+');'">
            <view class="tit">寒暑假兼职家教</view>
            <view class="desc">寒暑假持续教授，学习提升更有持续性</view>
            <view class="but">立即进入，自选家教</view>
          </view>
        </view>

        <view class="card_r">
          <view class="item" @tap="$xyfun.to('/pages/job/push_job')" :style="'background-image: url('+$xyfun.image('/static/parttime_for_jiajiao/mr1.png')+');'">
            <view class="tit">家长快速找家教</view>
            <view class="desc">“滴滴模式”快速找家教，家长发布学生基本情况，家教主动快速接单！</view>
            <view class="but">立即进入</view>
          </view>
          <view class="item" @tap="$xyfun.to('/pages/teacher/choose')" :style="'background-image: url('+$xyfun.image('/static/parttime_for_jiajiao/mr2.png')+');'">
            <view class="tit">智能匹配家教</view>
            <view class="desc">家长发布期望的家教条件，系统自动为您匹配，让选择更精准</view>
            <view class="but">立即进入</view>
          </view>
        </view>
      </view>

    </view>
    <view class="lists">
      <view class="lists_title">
        <view class="name">{{common.auditConfig.index_teachers}}</view>
        <view class="more" @tap="$xyfun.to('/pages/teacher?recommend=1')">更多 ></view>
      </view>

      <view v-for="(item,index) in teacher_list" v-if="common.auditConfig.audit_on==0">
        <teacher-row :item="item"></teacher-row>
      </view>
      <view v-for="(item,index) in teacher_list" v-if="common.auditConfig.audit_on==1">
        <teacher-row2 :item="item"></teacher-row2>
      </view>

      <view class="bot_more" @tap="$xyfun.to('/pages/teacher')">查看更多</view>
    </view>

    <view class="help_find" v-if="common.auditConfig.audit_on==0">
      <view class="hf_item" @tap="$xyfun.to('/pages/teacher/choose')">
        <view class="tit">北极豚平台帮你选师</view>
        <view class="cont">
          <image :src="$xyfun.image('/static/parttime_for_jiajiao/r1.png')"></image>
          <view class="desc">
            您可以定制要求，平台为你寻找最适合自己的家教，付费定制，满意为止
            <view class="but">立即进入</view>
          </view>
        </view>
      </view>
      <view class="hf_item" @tap="$xyfun.to('/pages/teacher?settled=4')">
        <view class="tit">全职家庭教员</view>
        <view class="cont">
          <image :src="$xyfun.image('/static/parttime_for_jiajiao/r2.png')"></image>
          <view class="desc">
            陪伴式的专职家庭教师，习惯的养成，榜样的力量
            <view class="but">立即进入</view>
          </view>
        </view>
      </view>
    </view>

    <view class="find_box" v-if="common.auditConfig.audit_on==0">
      <view  class="fb_title">{{common.auditConfig.index_school1}}</view>
      <view class="fb_cont">
        <view class="fb_item" @tap="settledCate(4)">
          <view class="fb_tit">{{common.auditConfig.index_school2}}</view>
          <view class="fb_desc">
            <view class="fb_button">{{common.auditConfig.index_school3}}</view>
            <image class="fb_image" :src="$xyfun.image('/static/course/tu19.png')"></image>
          </view>
        </view>

        <view class="fb_item" @tap="settledCate(5)">
          <view class="fb_tit">{{common.auditConfig.index_school4}}</view>
          <view class="fb_desc">
            <view class="fb_button" style="color:#d57375 ">{{common.auditConfig.index_school5}}</view>
            <image class="fb_image" :src="$xyfun.image('/static/course/tu20.png')"></image>
          </view>
        </view>
      </view>
    </view>

    <view class="serve_box" v-if="common.auditConfig.audit_on==0">
      <view class="sb_title">服务承诺</view>
      <view class="sb_cont">
        <view class="sb_tiem" v-for="(val) in promise_list">
          <image class="sb_image" :src="$xyfun.image(val.image)"></image>
          <view class="sb_tit">{{val.title}}</view>
          <view class="sb_desc">{{val.desc1}}</view>
          <view class="sb_button">{{val.desc2}}</view>
        </view>
      </view>
    </view>

    <view class="xy-modal-box xy-modal-box-center refund-box" :class="[applyModelShow?'xy-modal-show':'']">
      <view class="refund-tite">
        <text>请提供您单位的信息</text>
        <text class="yz-iconfont yz-guanbi" @tap="applyModelShow=!applyModelShow"></text>
      </view>
      <view class="refund-item">
        <input placeholder="请填写昵称" v-model="apply_nickname"></input>
      </view>
      <view class="refund-item">
        <input placeholder="请填写手机号" v-model="apply_mobile"></input>
      </view>
      <view class="refund-item">
        <input placeholder="请填写学校" v-model="apply_school"></input>
      </view>

      <view class="refund-action">
        <view class="yes" @tap="apply_confirm">确认</view>
      </view>
    </view>
    <view class="xy-modal-mask" :class="[applyModelShow?'xy-mask-show':'']" @tap="applyModelShow =!applyModelShow"></view>

    <notice ref="notice" v-if="user && user.isLogin"></notice>
    <xy-tabbar />
  </view>
</template>

<script>
import { mapState } from 'vuex';
import xyTabbar from "@/components/xy-tabbar/index.vue";
import teacherRow from "@/components/teacher/row.vue"
import teacherRow2 from "@/components/teacher/row2.vue"
import notice from "@/components/xy-user/notice.vue";

export default {
  components: {notice, xyTabbar,teacherRow,teacherRow2},
  data() {
    return {
      isLoading: true,
      lat : 0,
      lng : 0,
      addr : '',
      banner : [],
      teacher_list: [],
      promise_list: [],

      apply_nickname : '',
      apply_mobile : '',
      apply_school : '',
      applyModelShow:false,

    };
  },
  computed: {
    ...mapState(['common','user'])
  },

  async onLoad() {

  },
  onShow(){
    if(uni.getStorageSync('addr')){
      this.addr = uni.getStorageSync('addr');
    }
    if(uni.getStorageSync('lat')){
      this.lat = uni.getStorageSync('lat');
    }
    if(uni.getStorageSync('lng')){
      this.lng = uni.getStorageSync('lng');
      this.loadData();
    }else{
      if(this.isLoading){
        this.loadData();
      }
    }

    if(this.user && this.user.isLogin && this.$refs.notice){
      this.$refs.notice.loadNotice();
    }
  },
  methods: {
    async loadData() {
      this.$api.postBase({
        url: 'index/index',
        data: {
          lat : this.lat,
          lng : this.lng
        },
        loadingTip: '加载中...',
        success: res => {
          this.isLoading = false;
          this.teacher_list = res.teacher;
          this.banner = res.banner;
          this.promise_list = res.promise;
        }
      })
    },
    chooseUserLocation(){
      var that = this;
      uni.chooseLocation({
        success: res => {
          that.addr = res.address + res.name;
          that.lat = res.latitude;
          that.lng = res.longitude;
          uni.setStorageSync('addr',res.address + res.name)
          uni.setStorageSync('lat',res.latitude)
          uni.setStorageSync('lng',res.longitude)
        },
        fail: err => {

        }
      });

    },
    //付费老师需要审核通过的才有权限查看
    settledCate(cate){
      this.$api.postBase({
        url: 'index/settled_route',
        data: {
        },
        loadingTip: '加载中...',
        success: res => {
          if(res){
            this.$xyfun.to('/pages/teacher?settled='+cate)
          }else{
            this.applyModelShow = true;
          }
        }
      })
    },

    //只有成为教师才有资格进入
    toAcceptJob(){
      this.$api.postBase({
        url: 'index/teacher_route',
        data: {
        },
        loadingTip: '加载中...',
        success: res => {
          this.$xyfun.to('/pages/job/quickly_accept');
        }
      })
    },

    //提交单位信息
    apply_confirm(){
      this.$api.postBase({
        url: 'index/school_apply',
        data: {
          apply_nickname : this.apply_nickname,
          apply_mobile : this.apply_mobile,
          apply_school : this.apply_school,
        },
        loadingTip: '加载中...',
        success: res => {
          this.applyModelShow = false;
          this.$xyfun.msg('申请已经提交至后台');
        }
      })
    }
  }
}
</script>

<style>
page{
  background: #e7e7e7;
}
</style>
<style lang="scss">
.container{
}
.linear-bg{
  background: #fcefd3;
  .navBarTit{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-weight: bold;
    padding-left: 40rpx;
    color: #000;
    .local{
      position: absolute;
      left: 0rpx;
      font-size: 24rpx;
      font-weight: bold;
      z-index: 111;
      color: #000;
      display: flex;
      align-items: center;
      .yz-iconfont{
        font-size: 24rpx;
        position: relative;
        left: unset;
        top: unset;
        margin-right: -20rpx;
      }
      text{
        margin-right: 10rpx;
        font-size: 32rpx;
      }
    }
  }
}

.banner_box{
  width: 100%;
  height: 310rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fcefd3;
  .banner{
    width: 100%;
    height: 310rpx;
    image{
      width: 100%;
      height: 310rpx;
    }
  }
}

.menus_box{

  .menus{
    //margin-top: 10rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 30rpx;
    margin-bottom: 10rpx;
    .item{
      padding: 20rpx;
      border-radius: 20rpx;
      height: 200rpx;
      width: 320rpx;
      &:nth-of-type(1){
        color: #ff8d46;
        background: linear-gradient(to bottom,#fffcf9,#fff6ea);
      }
      &:nth-of-type(2){
        color: #45abff;
        background: linear-gradient(to bottom,#f7fffe,#e6fafa);
      }
      .tit{
        color: #000;
        font-size: 28rpx;
        font-weight: bold;
      }
      .desc{
        margin-top: 20rpx;
        font-size: 20rpx;
      }
      .tool{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15rpx;
        .but{
          background: #fff;
          border-radius: 20rpx;
          height: 50rpx;
          line-height: 50rpx;
          font-size: 22rpx;
          padding: 0 15rpx;
        }
        image{
          width: 80rpx;
          height: 80rpx;
        }
      }
    }
  }
}

.teacher_settled_box{
  overflow: hidden;
  background: #fff;
  margin: 10rpx 20rpx 10rpx 20rpx;
  border-radius: 20rpx;
  .title{
    padding-left: 40rpx;
    padding-top: 20rpx;
    font-weight: bold;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    &:before{
      content: '';
      display: block;
      width: 12rpx;
      height: 40rpx;
      background: #ed8c1b;
      margin-right: 20rpx;
      border-radius: 30rpx;
    }
  }
}


.is_family{
  overflow: hidden;
  background: #fff;
  margin: 0 20rpx 0 20rpx;
  border-radius: 20rpx;
  .title{
    padding: 20rpx 40rpx;
    font-weight: bold;
    font-size: 32rpx;
    display: flex;
    align-items: center;
    &:before{
      content: '';
      width: 12rpx;
      height: 40rpx;
      background: #ed8c1b;
      margin-right: 20rpx;
      border-radius: 30rpx;
    }
  }
  .cards{
    display: flex;
    justify-content: space-between;
    padding: 0 30rpx;
    .item{
      margin-bottom: 10rpx;
      background-size: 100% 100%;
      padding: 10rpx 20rpx;
      height: 150rpx;
      .tit{
        font-size: 28rpx;
        font-weight: bold;
      }
      .desc{
        margin-top: 8rpx;
        font-size: 22rpx;
        color: #383838;
      }
      .but{
        background: #fff;
        border-radius: 20rpx;
        height: 38rpx;
        line-height: 38rpx;
        font-size: 20rpx;
        padding: 0 15rpx;
        display: inline-block;
      }
    }
  }
  .card_l{
    background-size:100% 100%;   /* 背景图片按比例缩放，覆盖整个元素 */
    width: 315rpx;
    .item{
      position: relative;
      .desc{
        //white-space: nowrap;
      }
      .but{
        position: absolute;
        right: 10rpx;
        bottom: 10rpx;
      }
    }
    .item:nth-of-type(1) .but{
      color: #d09d59;
    }
    .item:nth-of-type(2) .but{
      color: #2085b4;
    }
    .item:nth-of-type(3) .but{
      color: #3cb521;
    }
  }
  .card_r{
    width: 315rpx;
    .item{
      height: 228rpx;
      position: relative;
      .desc{
        line-height: 40rpx;
      }
      .but{
        position: absolute;
        right: 10rpx;
        bottom: 10rpx;
      }
    }
    .item:nth-of-type(1) .but{
      color: #568adf;
    }
    .item:nth-of-type(2) .but{
      color: #2085b4;
    }
  }
}

.lists{
  background: #ffffff;
  padding: 20rpx 20rpx;
  margin: 10rpx 20rpx;
  border-radius: 10rpx;
}

.lists_title{
  background: #fff;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  &:before{
    content: '';
    width: 12rpx;
    height: 40rpx;
    background: #ed8c1b;
    border-radius: 30rpx;
    margin-left: 10rpx;
    position: relative;
    bottom: -4rpx;

  }
  .name{
    font-size: 32rpx;
    margin-left: 20rpx;
    font-weight: bold;
  }
  .more{
    flex-grow: 1;
    text-align: right;
    margin-right: 30rpx;
    font-weight: bold;
    font-size: 25rpx;
  }
}


.bot_more{
  font-size: 24rpx;
  margin-left: 300rpx;
  padding: 20rpx 0;
}

.help_find{
  display: flex;
  margin-left: 20rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
  background: #fff;
  padding: 20rpx;
  justify-content: space-between;
  .hf_item{
    background: linear-gradient(to bottom, #fffaf6, #fff7ec);
    width: 320rpx;
    .tit{
      font-weight: bold;
      font-size: 28rpx;
      margin-top: 30rpx;
      text-align: center;
    }
    .cont{
      margin-top: 10rpx;
      display: flex;
      justify-content: space-between;
      image{
        width: 90rpx;
        height: 90rpx;
      }
      .desc{
        width: 1rpx;
        flex-grow: 1;
        font-size: 18rpx;
        margin-top: 10rpx;
        color: #6c747e;
      }
      .but{
        margin-bottom: 20rpx;
        font-size: 25rpx;
        color: #ff8d46;
        padding: 5rpx 20rpx;
        background: #ffffff;
        width: 140rpx;
        border-radius: 40rpx;
        font-weight: bold;
        margin-top:20rpx;
        float: right;
        margin-top: 20rpx;
      }
    }
  }
}

.find_box{
  border-radius: 8rpx;
  background: #ffffff;
  margin: 20rpx 20rpx 20rpx 20rpx;
  padding: 20rpx;
  .fb_title{
    font-weight: bold;
    font-size: 32rpx;
    margin-bottom: 20rpx;
    margin-top: 10px;
    display: flex;
    &:before{
      content: '';
      width: 12rpx;
      height: 40rpx;
      background: #ed8c1b;
      margin-right: 20rpx;
      border-radius: 30rpx;
      margin-left: 20rpx;
    }
  }
  .fb_cont{
    margin-top: 20rpx;
    display: flex;
    justify-content: space-around;
    .fb_item{
      background: #f8fbff;
      padding: 20rpx 20rpx;
      width: 47%;
      border-radius: 8rpx;
      .fb_tit{
        font-size: 30rpx;
        font-weight: bold;
      }
      .fb_desc{
        display: flex;
        .fb_button{
          font-size: 24rpx;
          color: #417fc9;
          padding: 5rpx 10rpx;
          background: #ffffff;
          width: 140rpx;
          height: 40rpx;
          box-sizing: border-box;
          border-radius: 40rpx;
          font-weight: bold;
          margin-top:60rpx;
          text-align: center;
          white-space: nowrap;
        }
        .fb_image{
          width: 120rpx;
          height: 90rpx;
          margin-left: 50rpx;
          margin-top:20rpx;
        }
      }
    }
    .fb_item:nth-of-type(2){
      background: #fff4f3;
    }
  }
}

.serve_box {
  background: #ffffff;
  margin: 20rpx 20rpx;
  border-radius: 8rpx;
  .sb_title {
    padding-top: 40rpx;
    margin-left: 40rpx;
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: flex;
    &:before{
      content: '';
      width: 12rpx;
      height: 40rpx;
      background: #ed8c1b;
      margin-right: 20rpx;
      border-radius: 30rpx;
    }
  }
  .sb_cont {
    display: flex;
    flex-wrap: wrap;//换行
    justify-content: space-between;
    padding-bottom: 30rpx;
    .sb_tiem {
      width: 50%;
      display: flex;
      align-items: center;
      flex-direction: column;
      .sb_image {
        width: 120rpx;
        height: 120rpx;
      }
      .sb_tit{
        color: #ed8c1b;
        margin-top: 20rpx;
        font-weight: bold;
        font-size: 25rpx;
      }
      .sb_desc{
        color: #999999;
        font-size: 22rpx;
        margin-top: 10rpx;
        font-weight: bold;
      }
      .sb_button{
        color: #999999;
        font-size: 22rpx;
        font-weight: bold;
      }
      .sb_desc:nth-of-type(1){
        margin-top: 60rpx;
      }
      .sb_button2{
        color: #999999;
        font-size: 22rpx;
        margin-left: 28rpx;
        font-weight: bold;
        margin-bottom:60rpx;
      }
      .sb_button1{
        width: 100%;
        text-align: center;
        color: #999999;
        font-size: 22rpx;
        font-weight: bold;
      }
    }
  }
}

.bottom_box{
  background: #ffffff;
  margin: -14rpx 5rpx;
  display: flex;
  text-align: center;
  border-radius: 8rpx;
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* 使用 drop-shadow 实现阴影 */
  .bo_cont{
    width: 25%;
    border-right: 1rpx solid #b4b1b1;
    padding-bottom: 10rpx;
    padding-top: 10rpx;
    .bo_image{
      width: 50rpx;
      height: 50rpx;
    }
    .bo_tit{
      font-weight: bold;
      font-size: 26rpx;
    }
    &:nth-of-type(4){
      border-right: 0;
    }
  }
}

.refund-box{
  width: 80%;
  border-radius: 15rpx;
  .refund-tite{
    height: 80rpx;
    line-height: 80rpx;
    font-size: 36rpx;
    text-align: center;
    margin-bottom: 20rpx;
    font-weight: bold;
    position: relative;
    .yz-iconfont{
      position: absolute;
      right: 20rpx;
      top: 0;
      color : #a6a6a6;
    }
  }
  .refund-item{
    margin: 20rpx 20rpx;
    input{
      padding-left: 20rpx;
      width: 100%;
      background: #f2f2f2;
      border-radius: 10rpx;
      height: 70rpx;
      line-height: 70rpx;
      box-sizing: border-box;
      font-size: 26rpx;
    }
  }
  .refund-action{
    padding: 0 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    height: 100rpx;
    align-items: center;
    view{
      width: 200rpx;
      height: 60rpx;
      border-radius: 10rpx;
      line-height: 60rpx;
      text-align: center;
    }
    .yes{
      background: $uni-color-warning;
      color: #fff;
    }
  }
}
</style>
`
